<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/jquery-1.10.2.min.js"></script>

</head>

</head>
<style>
    #tableone,#tableone2{
        margin-top: 30px;
        width: 95%;
        height: 10%;
        border: 1px solid #D9D9D9;
        border-collapse:collapse;
    }
    #tableone td,#tableone2 td{
        border: 1px solid #D9D9D9;
        border-left:0px solid #D9D9D9;
        border-right:0px solid #D9D9D9;
        height: 50px;
    }
    #tableonetr,#tableonetr2{
        background: -webkit-linear-gradient(#FFFFFF, #F5F5F5);
    }
    #trthree td,#trthree2 td,#trthree3 td,#trthree4 td,#trthree5 td,#trthreeadd td,#trthree2add td,#trthree3add td,#trthree4add td,#trthree5add td{
        margin-left: 200px;
        height: 50px;
    }
    #sss,#sssadd{
        width: 1000px;
    }
</style>
<body>

<button  onclick="queryfrpruadd()" class="btn btn-default" data-toggle="modal" data-target="#myModaladd">添加</button>
<center>

    <button type="submit" onclick="checked()" class="btn btn-default">已审核</button>
    <button type="submit" onclick="unchecked()" class="btn btn-default">未审核</button>
<table id="tableone">
    <tr id="tableonetr">
        <td>编号</td>
        <td>仓库名称</td>
        <td>供应商</td>
        <td>采购人</td>
        <td>日期</td>
        <td>审核</td>
        <td>操作</td>
    </tr>
    <tbody id="frprutab">
    <div id="showhide">
        <input type="text" @keyup="comaaa" ref="testval" class="form-control" style="width: 300px;margin-left: 20px;"   placeholder="请输供应商名称"><br/>
        <input type="text" @keyup="combbb" ref="testval1" class="form-control" style="width: 300px;margin-left: 20px;"  placeholder="请输仓库名称">
    </div>
    <tr v-for="frpru in frprulist" >
        <td>{{frpru.frpid}}</td>
        <td>{{frpru.entryname}}</td>
        <td>{{frpru.supname}}</td>
        <td>{{frpru.clname}}</td>
        <td>{{frpru.frpdate}}</td>
        <td>
            <span v-show="frpru.frpstate==0"><button type="submit" @click="checked1(frpru.frpid)" class="btn btn-default" style="background-color:#5BC0DE">未审核</button></span>
            <span v-show="frpru.frpstate==1"><button type="submit" @click="updateaudit(frpru.frpid)" class="btn btn-default" style="background-color:#DDF977">已审核</button></span>
        </td>
        <td>
            <button type="submit" @click="del(frpru.frpid)" class="btn btn-default">删除</button>
            <button @click="queryfrpruOne(frpru.frpid)" class="btn btn-default" data-toggle="modal" data-target="#myModal">详情</button>
        </td>
    </tr>
    </tbody>
</table>
</center>
<!-- 详情模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" id="sss">
        <div class="modal-content" style="width: 100%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    材料的详细信息
                </h4>
            </div>
            <div class="modal-body" style="height: 80%">
                <table style="width: 100%">
                    <tr id="trthree">
                        <td>仓库名称</td>
                        <td><input name="entryname" id="entryname" v-model="tryname" ></td>
                        <td>供应商</td>
                        <td><input name="supname" id="supname" v-model="supname" ></td>
                        <td>材料名称</td>
                        <td><input name="supinfoname" id="supinfoname" v-model="supinfoname" ></td>
                    </tr>
                    <tr id="trthree2">
                        <td>制单日期</td>
                        <td><input name="frpdate" id="frpdate" v-model="frpdate" ></td>
                        <td>送货单号</td>
                        <td><input name="frpcode" id="frpcode" v-model="frpcode" ></td>
                        <td>采购人</td>
                        <td><input name="clname" id="clname" v-model="clname" ></td>
                    </tr>
                    <tr id="trthree3">
                        <td>款号名称</td>
                        <td><input name="haoname" id="haoname" v-model="haoname" ></td>
                        <td>入库单号</td>
                        <td><input name="frprucode" id="frprucode" v-model="frprucode" ></td>
                        <td>批次号</td>
                        <td><input name="frpcihao" id="frpcihao" v-model="frpcihao" ></td>
                    </tr>
                    <tr id="trthree4">
                        <td>规格</td>
                        <td><input name="frpcgui" id="frpcgui" v-model="frpcgui" ></td>
                        <td>季度</td>
                        <td><input name="seaname" id="seaname" v-model="seaname" ></td>
                        <td>单位</td>
                        <td><input name="frpwei" id="frpwei" v-model="frpwei" ></td>
                    </tr>
                    <tr id="trthree5">
                        <td>颜色</td>
                        <td><input name="tinctname" id="tinctname" v-model="tinctname" ></td>
                        <td>订单数</td>
                        <td><input name="frpshennum" id="frpshennum" v-model="frpshennum" ></td>
                        <td>总数量</td>
                        <td><input name="frpallnum" id="frpallnum" v-model="frpallnum" ></td>
                    </tr>
                </table>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 添加模态框（Modal） -->
<div class="modal fade" id="myModaladd" tabindex="-1" role="dialog" aria-labelledby="myModalLabeladd" aria-hidden="true">
    <div class="modal-dialog" id="sssadd">
        <div class="modal-content" style="width: 100%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabeladd">
                    材料的详细信息
                </h4>
            </div>
            <div class="modal-body" style="height: 80%">
                <table style="width: 100%">
                    <tr id="trthreeadd">
                        <td>
                            <label class="col-sm-2 control-label">仓库名称</label>
                            <select id="selectentrid" class="entridsel" name="entrid"></select>
                        </td>
                        <td>
                            <label class="col-sm-2 control-label">供货商</label>
                            <select id="selectsupname" class="supidsel" name="supid"></select>
                        </td>
                        <td>
                            <label class="col-sm-2 control-label">进货人</label>
                            <select id="selectclname" class="clidsel" name="clid"></select>
                        </td>
                    </tr>
                    <%--<tr id="trthree2add">
                        <td>季度</td>
                        <td><input type="text" class="form-control" id="seanameadd" placeholder="请输入名称" name="seaname"></td>
                        <td>颜色</td>
                        <td><input type="text" class="form-control" id="tinctid" placeholder="请输入名称" name="tinctid"></td>
                        <td>物料名称</td>
                        <td><input type="text" class="form-control" id="haoid" placeholder="请输入名称" name="haoid"></td>
                    </tr>
                    <tr id="trthree3add">
                        <td>款号名称</td>
                        <td><input type="text" class="form-control" id="haonameadd" placeholder="请输入名称" name="haoname"></td>
                        <td>制单日期</td>
                        <td><input type="text" class="form-control" id="frpdateadd" placeholder="请输入名称" name="frpdate"></td>
                        <td>送货单号</td>
                        <td><input type="text" class="form-control" id="frpcodeadd" placeholder="请输入名称" name="frpcode"></td>

                    </tr>
                    <tr id="trthree4add">
                        <td>批次号</td>
                        <td><input type="text" class="form-control" id="frpcihaoadd" placeholder="请输入名称" name="frpcihao"></td>
                        <td>规格</td>
                        <td><input type="text" class="form-control" id="frpcguiadd" placeholder="请输入名称" name="frpcgui"></td>
                        <td>单位</td>
                        <td><input type="text" class="form-control" id="frpweiadd" placeholder="请输入名称" name="frpwei"></td>
                    </tr><br/>
                    <tr id="trthree5add">
                        <td>申请数量</td>
                        <td><input type="text" class="form-control" id="frpshennumadd" placeholder="请输入名称" name="frpshennum"></td>
                        <td>总数量</td>
                        <td><input type="text" class="form-control" id="frpallnumadd" placeholder="请输入名称" name="frpallnum"></td>
                    </tr>--%>
                </table>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <%--<input type="button" class="btn btn-default" value="添加" id="addinsert">--%>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div id="fenye">
    <button class='btn btn-info btn-sm' @click="shang(1)" style="font-weight:bold;margin-left:500px;font-family: 楷体;font-size: 15px"type="button" >上一页</button>
    {{currentPage}}
    <button class='btn btn-info btn-sm'  @click="xia(1)" style="font-weight:bold;font-family: 楷体;font-size: 15px" type="button" >下一页</button>
    <span style="font-family: 楷体;font-size: 20px">总{{MaxPage}}页</span>
</div>
</body>
</html>
<script>
  function queryfrpruadd(){
      //页面加载时加载仓库查询
      queryfrpruentrepot();
      //页面加载时加载供应商查询
      queryfrprusupplier();
      //页面加载时加载供应商查询
      queryfrpruclient()
  }
  //仓库查询
    function queryfrpruentrepot(){
        $(".entridsel").html(" ")
        $.ajax({
            url:"/frpru/queryfrpruentrepot",
            type:"post",
            data:{},
            dataType:"json",
            success:function(data){
                var option="";
                for(var i=0;i<data.length;i++){
                    option+="<option value='"+data[i].entrid+"'>"+data[i].entryname+"</option>";
                }
                $(".entridsel").append(option);
            }
        })
    }
  //供货商查询
  function queryfrprusupplier(){
      $(".supidsel").html(" ")
      $.ajax({
          url:"/frpru/queryfrprusupplier",
          type:"post",
          data:{},
          dataType:"json",
          success:function(data){
              var option="";
              for(var i=0;i<data.length;i++){
                  option+="<option value='"+data[i].supid+"'>"+data[i].supname+"</option>";
              }
              $(".supidsel").append(option);
          }
      })
  }
  //进货人查询
  function queryfrpruclient(){
      $(".clidsel").html(" ")
      $.ajax({
          url:"/frpru/queryfrpruclient",
          type:"post",
          data:{},
          dataType:"json",
          success:function(data){
              var option="";
              for(var i=0;i<data.length;i++){
                  option+="<option value='"+data[i].clid+"'>"+data[i].clname+"</option>";
              }
              $(".clidsel").append(option);
          }
      })
  }





    var showhide = new Vue({
        el: '#showhide',
        data:{
            testval:'',
            testval1:'',
        },
        methods : {
            comaaa:function(){
                load.fenyeselesupname(fan.currentPage,this.$refs.testval.value);
            },
            combbb:function(){
                load.fenyeentryname(fan.currentPage,this.$refs.testval1.value);
            },
        }
    });
    $(function(){
        load.fenye(1);
    })
    Vue.use(VueResource);
    /*修改前的查询*/
    var upd= new Vue({
        el:"#myModal",
        data:{
            iddf:"",
            tryname:"",
            supname:"",
            frpdate:"",
            frpcode:"",
            clname:"",
            haoname:"",
            frprucode:"",
            frpshennum:"",
            seaname:"",
            frpallnum:"",
            frpwei:"",
            frpcihao:"",
            frpcgui:"",
            supinfoname:"",
            tinctname:'',
        },
    })

    var load= new Vue({
        el:"#frprutab",
        data:{
            frprulist:"",
        },

        methods:{
            //删除方法
            del:function(frpid) {
                var url = "/frpru/delfrpru/"+ frpid;
                this.$http.post(url).then(function (data) {
                    this.fenye(1);
                })
            },//查询一条数据
            queryfrpruOne:function (frpid) {
                var url = "/frpru/queryfrpruOne/"+frpid;
                this.$http.post(url).then(function (data) {
                    //alert(data.body[0].entryname);
                    //upd.iddf=data.body[0].frpid;
                    upd.tryname=data.body[0].entryname;
                    upd.supname=data.body[0].supname;
                    upd.frpdate=data.body[0].frpdate;
                    upd.frpcode=data.body[0].frpcode;
                    upd.clname=data.body[0].clname;
                    upd.haoname=data.body[0].haoname;
                    upd.frprucode=data.body[0].frprucode;
                    upd.frpshennum=data.body[0].frpshennum;
                    upd.frpallnum=data.body[0].frpallnum;
                    upd.seaname=data.body[0].seaname;
                    upd.frpwei=data.body[0].frpwei;
                    upd.frpcgui=data.body[0].frpcgui;
                    upd.frpcihao=data.body[0].frpcihao;
                    upd.supinfoname=data.body[0].supinfoname;
                    upd.tinctname=data.body[0].tinctname;
                })
            },
            //查询已审核
            fenye: function (pageNum){
                var url = "/frpru/queryfrpru/"+pageNum; //   前面要加/
                this.$http.post(url).then(function (data) {//ajax请求封装
                    fan.currentPage= data.body.pageNum;
                    fan.MaxPage=data.body.pages;
                    this.frprulist=data.body.list;
                }, function(a){   //返回失败方法调用，暂不处理
                })},
            //查询未审核
            fenyes: function (pageNum){
                var url = "/frpru/queryfrpru2/"+pageNum; //   前面要加/
                this.$http.post(url).then(function (data) {//ajax请求封装
                    fan.currentPage= data.body.pageNum;
                    fan.MaxPage=data.body.pages;
                    this.frprulist=data.body.list;
                }, function(a){   //返回失败方法调用，暂不处理
                })},
            //查询供应商
            fenyeselesupname:function (pageNum,supname){
                //alert(pageNum);
                var url = "/frpru/supnameAll"; //   前面要加/
                this.$http.post(url,{supname:supname,PageNum:pageNum},{emulateJSON:true}).then(function (data) {//ajax请求封装
                    fan.currentPage= data.body.pageNum;
                    fan.MaxPage=data.body.pages;
                    this.frprulist=data.body.list;
                }, function(a){   //返回失败方法调用，暂不处理
                })
            },
        //查询仓库
            fenyeentryname:function (pageNum,entryname){
            var url = "/frpru/entrynameAll"; //   前面要加/
            this.$http.post(url,{entryname:entryname,PageNum:pageNum},{emulateJSON:true}).then(function (data) {//ajax请求封装
                fan.currentPage= data.body.pageNum;
                fan.MaxPage=data.body.pages;
                this.frprulist=data.body.list;
            }, function(a){   //返回失败方法调用，暂不处理
            })
        },
            //修改未审核
            checked1:function(frpid){
                    //alert(frpid+"===")
                    var url="/frpru/checked1/"+frpid;
                    this.$http.post(url).then(function(data){
                        //alert(data.body);
                        window.location.reload();
                    })
            },
            //修改已审核
            updateaudit:function(frpid){
                var url="/frpru/updateaudit/"+frpid;
                this.$http.post(url).then(function(data){
                    window.location.reload();

                })
            },

        },
    })
    //分页
    var fan=new Vue({
        el:"#fenye",
        data:{
            currentPage:"",
            MaxPage:"",
        },
        methods:{
            //上一页
            shang:function(pageNum){
                if(this.currentPage-pageNum==0){
                    pageNum=1;
                }else{
                    pageNum=this.currentPage-pageNum;
                }
                load.fenye(pageNum)
            },
            //下一页
            xia:function(pageNum){
                if(this.currentPage+pageNum>this.MaxPage){
                    pageNum=this.currentPage;
                }else{
                    pageNum=this.currentPage+pageNum;
                }
                load.fenye(pageNum);
            }
        }
    })
    //查询所有未审核材料
    function unchecked() {
        load.fenyes(1)
    }
    //查询所有已审核材料
    function checked() {
        load.fenye(1)
    }
    //修改未审核状态
   /*function checked1(obj) {
        alert(obj+"sdfdf")
        $.ajax({
            url:"/frpru/checked1",
            type:"post",
            data:{"frpid":obj},
            dataType:"json",
            success:function(data){
                alert(data);
                 load.fenye(1);
            }
        })
    }*/
</script>